<template>
  <ElCard style="height: 75px;">
      <ElButton color="blue" style="float: right;margin-right: 20px;" @click="addRoleUser">新增</ElButton>
    <ElForm :model="searchRoleUserForm">
      <ElFormItem>
        <ElInput prefix-icon="Search" placeholder="请输入..." @keydown.enter="handleEnter" @clear="loadRoleUser" clearable style="width: 300px;" v-model="searchRoleUserForm.roleName"></ElInput>
      </ElFormItem>
    </ElForm>
  </ElCard>
  <!-- 问答表格 -->
  <ElCard style="height: 66vh;margin-top: 10px;overflow: auto;">
      <ElTable :data="RoleUserTableData" style="width: 100%;" :cell-style.data="{ 'text-align': 'center' }" :header-cell-style.data="{'text-align': 'center','background-color': '#F2F2F2',height: '60px'}">
        <ElTableColumn prop="roleName" label="角色名称" width="100px"/>
        <ElTableColumn prop="roleCount" label="角色成员" />
        <ElTableColumn prop="remark" label="角色描述" />
        <ElTableColumn
            prop="status"
            label="状态"
            width="240px">
            <template #default="scope">
                    <span :style="{ color: getStatusColor(scope.row.status) }">
                        {{ statusFormatter(row, column, cellValue) }}
                    </span>
            </template>
        </ElTableColumn>
        <ElTableColumn label="操作">
          <template #default="scope">
            <ElButton type="text" @click="handleEdit(scope.row)" style="color:#2D82FF ">编辑</ElButton>
            <ElButton type="text" @click="handleDelete(scope.row)" style="color:#EC404B">删除</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
  </ElCard>
</template>

<script setup>
import {onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import qs from "qs";
import router from "@/router";

const searchRoleUserForm = ref({
  roleName: ''
});

const RoleUserTableData = ref([]); // 存储所有字典数据

const loadRoleUser = () => {
  let roleName = searchRoleUserForm.value.roleName;
  axios.get(getBaseURL(4) + '/v1/userRole/selectUserRole',{params: {roleName: roleName}})
      .then(response => {
        if (response.data.code === 2000) {
          RoleUserTableData.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      })
      .catch(error => {
        ElMessage.error(error.message);
      });
};

const addRoleUser = () => {
  router.push('/system/user/addUser');
};


const handleEnter = (event) => {
  event.preventDefault();
  loadRoleUser(); // 阻止默认的表单提交行为
};

// 定义函数，格式化启用状态
const statusFormatter = (row, column, cellValue) => {
  return cellValue === '0' ? '禁用中' : '启用中';
}

const getStatusColor = (status) => {
  return status === '0' ? '#18CCD0' : '#EC2121';
}

const handleEdit = (row) => {
  console.log(row.roleId)
  router.push('/system/user/addUser?roleId='+row.roleId);
};

const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除？')
      .then(() => {
        axios.post(getBaseURL(4) + '/v1/userRole/deleteUserRole',qs.stringify({ roleId: row.roleId }))
            .then(response => {
              if (response.data.code === 2000) {
                ElMessage.success('删除成功');
                loadRoleUser(); // 重新加载
              } else {
                ElMessage.error(response.data.msg);
              }
            })
            .catch(error => {
              ElMessage.error(error.message);
            });
      })
      .catch(() => {});
};

onMounted(() => {
  loadRoleUser();
});
</script>





<style scoped>

</style>
